<template>
    <div class="home">
        <h1 class="form-title-main title-main">多用户申请</h1>
        <h1 class="form-title-main-a title-sub">以下信息请您务必填写正确以便后期联系！</h1>
        <van-divider />
        <div>
            <van-row>
                <h2 class="form-title">1.申报类型<span class="must-icon">*</span></h2>
                <van-field name="type" :rules="[{ required: true, message: '请选择申报类型' }]">
                    <template #input>
                        <van-radio-group v-model="postData.UseWaterType" direction="horizontal">
                            <van-radio name="个人">个人</van-radio>
                            <van-radio name="单位">单位</van-radio>
                        </van-radio-group>
                    </template>
                </van-field>

            </van-row>
            <van-divider />
            <div>
                <h2 class="form-title">2.请填写住户成员信息<span class="must-icon">*</span></h2>
                <div class="q-auto-table">
                    <div class="auto-table-wrap">
                        <table class="auto-table" cellspacing="0" cellpadding="0">
                            <tbody>
                            <tr>
                                <td class="option_label">
                                    <div class="show_title" data-title="姓名" style="width: 176px;">姓名</div>
                                </td>
                                <td class="option_label">
                                    <div class="show_title" data-title="电话" style="width: 176px;">电话</div>
                                </td>
                                <td class="option_label">
                                    <div class="show_title" data-title="身份证号码" style="width: 176px;">身份证号码</div>
                                </td>
                                <td class="option_label">
                                    <div class="show_title" data-title="楼层地址" style="width: 176px;">楼层地址</div>
                                </td>
                                <td class="option_label">
                                    <div class="show_title" data-title="口径" style="width: 176px;">口径</div>
                                </td>
                                <td class="option_label">
                                    <div class="show_title" data-title="用水性质" style="width: 176px;">用水性质</div>
                                </td>
                            </tr>
                            <template v-for="(item,index) in postData.UserInfos">
                                <tr class="data_row hide" style="position:relative">
                                    <td>
                                        <textarea wrap="off"
                                                  class="option_open textarea-input"
                                                  maxlength="998" v-model="item.UserName"></textarea>
                                    </td>
                                    <td>
                                      <textarea wrap="off"
                                                class="option_open textarea-input"
                                                maxlength="998" v-model="item.UserPhone"></textarea>
                                    </td>
                                    <td>
                                        <textarea wrap="off"
                                                  class="option_open textarea-input"
                                                  maxlength="998" v-model="item.IdCardNo"></textarea>
                                    </td>
                                    <td>
                                        <textarea wrap="off"
                                                  class="option_open textarea-input"
                                                  maxlength="998" v-model="item.UserAddress"></textarea>
                                    </td>
                                    <td>
                                        <textarea wrap="off"
                                                  class="option_open textarea-input"
                                                  maxlength="998" v-model="item.WaterDeviceDiameter"></textarea>
                                    </td>
                                    <td>
                                           <textarea wrap="off"
                                                     class="option_open textarea-input"
                                                     maxlength="998" v-model="item.UseWaterNature"></textarea>
                                        <van-icon style="position:absolute;right:-35px;bottom:35px;" name="cross"
                                                  v-show="index>1" @click="deleteUser(index)" title="删除"/>
                                    </td>
                                </tr>
                            </template>

                            </tbody>
                        </table>
                    </div>
                </div>
                <van-button type="info" plain block @click="addUser">继续填写</van-button>
            </div>
            <van-divider />
            <van-row>
                <h2 class="form-title">3.授权委托书<span class="must-icon">*</span></h2>
                <van-uploader :after-read="afterReadAuth" :max-count="1" accept="*/*">
                    <van-button icon="arrow-up" type="info" plain block>选择文件（30M以内）</van-button>
                </van-uploader>
            </van-row>
            <van-divider />
            <van-row>
                <h2 class="form-title">4.营业执照电子版<span class="must-icon">*</span></h2>
                <van-uploader :max-count="1" accept="*/*" :after-read="afterReadCom">
                    <van-button icon="arrow-up" type="info" plain block>选择文件（30M以内）
                    </van-button>
                </van-uploader>
            </van-row>
            <van-divider />
            <van-row>
                <h2 class="form-title">5.建设许可证<span class="must-icon">*</span></h2>
                <van-uploader :max-count="1" accept="*/*" :after-read="afterReadPer">
                    <van-button icon="arrow-up" type="info" plain block>选择文件（30M以内）
                    </van-button>
                </van-uploader>
            </van-row>
            <van-divider />
            <div style="margin: 16px;">
                <van-button round block type="info" @click="submit">
                    提交
                </van-button>
            </div>
        </div>
    </div>
</template>

<script>
    import {
        Row, Col, Icon, Cell,
        CellGroup, Radio, RadioGroup, Field, Button, Uploader,Divider,
        Form, Toast
    } from 'vant'
    import {uploadFile, submitForm} from '@/api/form'
    import {getToken} from '@/utils/auth'

    export default {
        components: {
            [Row.name]: Row,
            [Col.name]: Col,
            [Icon.name]: Icon,
            [Cell.name]: Cell,
            [CellGroup.name]: CellGroup,
            [Toast.name]: Toast,
            [Radio.name]: Radio,
            [RadioGroup.name]: RadioGroup,
            [Field.name]: Field,
            [Button.name]: Button,
            [Uploader.name]: Uploader,
            [Form.name]: Form,
            [Divider.name]:Divider
        },

        data() {
            return {
                postData: {
                    id: '',
                    UseWaterType: '',
                    UserInfos: [],
                    file1: '',
                    file2: '',
                    file3: ''
                }
            }
        },
        computed: {},
        created() {
            this.initList()
            this.id = getToken()
        },
        methods: {
            gotourl(url, params = null) {
                this.$router.push({name: url, params: params})
            },
            initList() {
                for (let i = 0; i < 2; i++) {
                    this.addUser();
                }
            },
            addUser() {
                let obj = {
                    UserName: '',
                    UserPhone: '',
                    IdCardNo: '',
                    UserAddress: '',
                    UseWaterNature: '',
                    WaterDeviceNo: '',
                    WaterDeviceDiameter: ''
                }
                this.postData.UserInfos.push(obj);
                return false;
            },
            deleteUser(index) {
                this.postData.UserInfos.splice(index, 1);
                // if(index===0)
                //     this.addUser()
            },
            afterReadAuth(file) {
                read(file).then(response => {
                    console.log(response);
                })
            },
            afterReadCom(file) {
                read(file).then(response => {
                    console.log(response);
                })
            },
            afterReadPer(file) {
                read(file).then(response => {
                    console.log(response);
                })
            },
            submit() {
                const that = this
                console.log(that.postData)
                console.log(that.id)
                // 重置表单数据
                // Object.assign(that.$data, that.$options.data())
                // that.initList()
            }
        }
    }

    function read(file) {
        const fileName = file.file.name
        const filePostfix = fileName.split('.')[1]
        const newFileName = new Date().getTime().toString() + '.' + filePostfix
        const formData = new FormData()
        formData.append("file", file.file)
        formData.append("fileName", newFileName)
        return new Promise((resolve, reject) => {
            uploadFile(formData).then(response => {
                resolve(response)
            })
        })
    }
</script>

<style lang="less">
    .home {
        padding-bottom: 50px;
        font-size: 14px;
    }

    .mb10 {
        margin-bottom: 10px;
    }

    .form-title {
        margin: 0;
        padding: 32px 16px 16px;
        color: rgba(69, 90, 100, 0.6);
        font-weight: normal;
        font-size: 14px;
        line-height: 16px;
    }

    .form-title-main {
        text-align: left;
    }

    .title-main {
        font-size: 18px;
        color: #4c4c4c;
        line-height: 27px;
    }

    .title-sub {
        line-height: 24px;;
        font-size: 16px;
        color: #666;
    }

    .must-icon {
        color: #ff4444;
    }

    .van-radio {
        margin-bottom: 10px;
    }

    .van-uploader {
        display: block;
    }

    .van-uploader__input-wrapper {
        width: 100%;
    }

    .t-c-title {
        line-height: 45px;
    }

    .q-auto-table {
        position: relative;
        /*margin-left: -15px;*/
        /*margin-right: 35px;*/
    }

    .q-auto-table .auto-table-wrap {
        overflow: auto;
    }

    .q-auto-table * {
        box-sizing: border-box;
        font-size: 14px !important;
    }

    .q-auto-table table {
        width: 100%;
        border-top: 1px solid #eaeaea;
        border-left: 1px solid #eaeaea;
        text-align: center;
        margin-right: 0;
    }

    .q-auto-table tr:first-child {
        background-color: #fbfbfb;
    }

    .q-auto-table tr {
        height: 30px;
        overflow: hidden;
        width: 100%;
    }

    .q-auto-table .option_label .show_title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: 0 18px;
        width: 100%;
    }

    .q-auto-table textarea {
        margin: 0;
        padding: 0 8px;
        width: 100%;
        min-width: 140px;
        max-width: 200px !important;
        min-height: 26px;
        max-height: 26px;
        line-height: 24px;
        background: #fff;
        border-radius: 2px;
        border: 1px solid #eaeaea;
    }

    .textarea-input {
        overflow: overlay;
    }
</style>
